[Day28] - Vue 的 Html 字串處理 ( renderer 介紹 ) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 28

Modern Web

Web Component 網頁元件之路系列第 28 篇

[Day28] - Vue 的 Html 字串處理 ( renderer 介紹 )

13th鐵人賽

Tree

2021-10-02 22:33:13

884 瀏覽

分享至

function h(tag, children) {
  return { tag, children }
}

/**
 * transform the ast to vnode
 *
 *   { type: 'tag', tag:'div', children: [...] }   => h("ul", [...])
 * @param ast {object} - { type: 'tag', tag:'div', children: [...] }
 * @returns {object} vnode = h("ul", [...])
 */
const transformer = ast => {

  const getChildren = children => {

    if (!children) return undefined;
    else if (children.length === 0) return undefined;
    else if (children.length === 1) return transformer(children[0]);
    else return children.map(transformer);
  }

  if (ast.type === 'Root')
    return h('Root', getChildren(ast.children))

  else if (ast.type === 'tag')
    return h(ast.tag, getChildren(ast.children))

  else if (ast.type === 'text')
    return ast.content

  else throw new Error('[@@@@@@] unknown ast type !!')
}


const ast01 = {
  "type": "Root",
  "children": [
    {
      "type": "tag",
      "tag": "div",
      "children": [
        {
          "type": "text",
          "content": "Hello World"
        }
      ]
    }
  ]
}

const vnode01 = transformer(ast01)
console.log(vnode01.toString());
/*
  h("Root", [ h("div", "Hello World") ]);
 */

<body>

<div id="app"></div>

<script>
  const h = (tagName, children) => {

    const element = document.createElement(tagName)

    if (typeof children === 'string')
      element.innerText = children

    else if (Array.isArray(children))
      children.forEach(child => element.appendChild(child))

    else if (typeof children === HTMLElement)
      element.appendChild(children)

    return element
  }

  const mountIt = (selector, element) => {
    document.querySelector(selector).appendChild(element)
  }

  const App = h("ul", [
    h("li", "Item_1"),
    h("li", "Item_2")
  ]);

  mountIt('#app', App);
</script>
</body>